<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.province" placeholder="省份" style="width: 170px;"></el-input>
        <el-input clearable v-model="search.city" placeholder="地市" style="width: 170px;margin-left:5px;"></el-input>
        <el-input clearable v-model="search.area" placeholder="区县" style="width: 170px;margin-left:5px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="省份编码">
        <template slot-scope="scope">
          <span>
              {{scope.row.provinceCode}}
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="省份">
        <template slot-scope="scope">
          <span>{{ scope.row.provinceName }}</span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" label="城市编码">
        <template slot-scope="scope">
            <span>{{scope.row.cityCode}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="城市">
        <template slot-scope="scope">
            <span>{{scope.row.cityName}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="区县">
        <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="区县编码">
        <template slot-scope="scope">
            <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="经度">
        <template slot-scope="scope">
            <span>{{scope.row.longitude}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="纬度">
        <template slot-scope="scope">
            <span>{{scope.row.latitude}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="城市拼音">
        <template slot-scope="scope">
            <span>{{scope.row.pinYin}}</span>
        </template>
      </el-table-column>
      
      
      <el-table-column align="center" label="操作"  min-width="15%">
        <template slot-scope="scope">
          <router-link :to="'/configmanage/gisinfo/areadetails/'+scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              编辑
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as sysconfigApi from '@/api/sysconfig'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import guid from '@/utils/guid'


export default {
  name: 'AreaCounty',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        province:'',
        city:'',
        area:'',
      },
      search:{
        province:'',
        city:'',
        area:'',
      },
      
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  filters:{
    
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      sysconfigApi.getAreaCountyList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.province=that.search.province.trim();
      that.listQuery.city=that.search.city.trim();
      that.listQuery.area=that.search.area.trim();
      that.getList();
    },
    
    
   
  }
}
</script>
